
import { status } from 'nprogress';

import { Row } from 'element-ui';

import { onScopeDispose } from 'vue';

import { splice } from 'mock/user';
<template>
  <div>
    <div class="continal">
      <!-- 操作按钮顶部 -->
      <el-row>
        <el-col :span="3">
          <el-button type="primary"><b>+</b> 新建</el-button>
          <el-button type="primary">删除</el-button>
          <!-- <el-button v-else disabled>删除</el-button> -->
        </el-col>
        <el-col :span="6">
          <el-radio-group v-model="radio1">
            <el-radio-button label="全部" />
            <el-radio-button label="待审核" />
            <el-radio-button label="审核通过" />
            <el-radio-button label="审核失败" />
          </el-radio-group>
        </el-col>
      </el-row>
      <!-- 顶部下拉菜单 -->
      <el-row :gutter="20" style="margin-top: 30px;">
        <el-col :span="4">
          <el-select v-model="valuecangku" placeholder="请选择入库类型" style="width: 100%;">
            <!-- 入库类型 -->
            <el-option
              v-for="item in cangkulist"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-col>
        <!-- 入库/关联单号 -->
        <el-col :span="4">
          <el-input placeholder="请输入入库/关联单号" />
        </el-col>
        <!-- 开始日期~结束日期 -->
        <el-col :span="4">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-col>
        <el-col :span="4" style="margin-left: 120px;">
          <el-button>查询</el-button>
          <el-button>重置</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row style="margin-top:30px;">
        <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column fixed prop="Code" label="入库单号" width="180" />
          <el-table-column prop="InType" label="入库类型" width="160" />
          <el-table-column prop="InStorTime" label="入库时间" width="160" />
          <el-table-column prop="Status" label="状态" width="140">
            <template slot-scope="scope"><span :class="[scope.row.Status == 1 ? 'isno' : scope.row.Status ==0 ? 'iswait' : 'isyes']">{{ scope.row.Status == 1 ? '审核失败' : scope.row.Status ==0 ? '待审核' : '审核成功' }}</span></template>
          </el-table-column>
          <el-table-column prop="Supplier.Name" label="供应商" width="160" />
          <el-table-column prop="TotalNum" label="入库数量" width="120" />
          <el-table-column prop="CreateUser.RealName" label="制单人" width="120" />
          <el-table-column prop="CreateUser.UserName" label="审核人" width="120" />
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <template v-if="scope.row.Status === 0">
                <el-button type="text" size="small" @click="edittable(scope.row)">查看</el-button>
                <el-button type="text" size="small" @click="deltable(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="over(scope.row)">删除</el-button>
              </template>
              <template v-else>
                <el-button type="text" size="small" @click="noover(scope.row)">查看</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getInboundList } from '@/api/ruku'
export default {
  data() {
    return {
      cangkulist: [{}], // 入库类型
      valuecangku: '', // 双向绑定入库类型
      value1: '', // 双向绑定日期
      tableData: [{}], // 入库管理表格
      tabletime: '', // 时间
      tableValue: {
        pageIndex: 1,
        pageRows: 10,
        SortField: 'Id',
        SortType: 'asc',
        search: {
        }
      }, // 入库管理表格
      radio1: '上海'
    }
  },
  created() {
    this.getinboundList()
  },
  methods: {
    // 获取入库类型表格
    async getinboundList() {
      const res = await getInboundList(this.tableValue)
      console.log('入库表格', res)
      this.tableData = res
    }
  }
}
</script>

<style scoped>
.continal{
  margin-top:100px ;
  margin-left:80px;
}
.isno {
  color: red;
  width: 60px;
  position: absolute;
  height: 25px;
  left: 20px;
  border: 1px solid red;
  border-radius:4px;
  text-align: center;
  font-size: 12px;
  background:#fff0f6
}
.iswait{
  color: #eb2f96;
  width: 50px;
  position: absolute;
  height: 25px;
  left: 20px;
  border: 1px solid #Eb2F96;
  border-radius:4px;
  text-align: center;
  font-size: 12px;
  background:#fff0f6
}
.isyes{
  color: #52c41a;
  width: 60px;
  position: absolute;
  height: 25px;
  left: 20px;
  border-color: #b7eb8f;
  border-radius:4px;
  text-align: center;
  font-size: 12px;
  background: #f6ffed;
}
</style>
